{extend name="Layout/edit" /}
{block name="content"}
<!-- form start -->
<form action="{:U('editSave')}" method="post" class="form-horizontal">
    <div class="box-body">
        <div class="form-group">
            <label class="col-sm-2 control-label">商品名称</label>
            <div class="col-sm-10">
                <p class="form-control-static">{$data.title}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">操作日期</label>
            <div class="col-sm-5">
                <div class="input-group date xsui-datepicker" data-link-field="time_date">
                    <input type="text" name="time_date" class="form-control input-sm" value="{$data.time_date|default=date('Y-m-d')}" placeholder="操作日期" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">选择操作</label>
            <div class="col-sm-10">
                <div class="btn-group btn-group-justified">
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">出入库类型</span>
                            <select name="drection_type" class="form-control input-sm" data-url="{:U('getDirectionType')}" data-value="{$data.drection_type}"></select>
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">操作类型</span>
                            <select name="operate_type" class="form-control input-sm" data-url="{:U('getOperateTypeJson','direct=varkey')}" data-value="{$data.operate_type}"></select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">库存预览</label>
            <div class="col-sm-10">
                <div class="btn-group btn-group-justified">
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">出入库数量</span>
                            <input type="number" name="number" class="form-control input-sm" value="{$data.number|default=0}"  placeholder="出入库数量" required="required" />
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">出入库价格</span>
                            <input type="text" name="price" class="form-control input-sm" value="{$data.price|default=0}" placeholder="出入库价格" required="required" />
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">小计金额</span>
                            <input type="text" id="subtotal" class="form-control input-sm" value="{$data.old_stock|default=0.00}" readonly="readonly" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">库存统计</label>
            <div class="col-sm-10">
                <div class="btn-group btn-group-justified">
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">原库存</span>
                            <input type="text" id="old_stock" class="form-control input-sm" value="{$data.old_stock|default=0.00}" readonly="readonly" />
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="input-group">
                            <span class="input-group-addon">新库存</span>
                            <input type="text" id="new_stock" class="form-control input-sm" value="{$data.old_stock|default=0.00}" readonly="readonly" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">出入库备注</label>
            <div class="col-sm-10">
                <input type="text" name="remark" class="form-control input-sm" value="{$data.remark}" placeholder="出入库备注" />
            </div>
        </div>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <button type="button" class="btn btn-default xsui-btn-close-dialog">取消</button>
        <button type="submit" class="btn btn-primary pull-right">保存</button>
        <input type="hidden" name="id" value="{$data.id}"/>
    </div>
    <!-- /.box-footer -->
</form>
{/block}
{block name="script_after"}
<script>
    $('select[name="operate_type"]').ajaxcombobox({first: {id: "", text: "选择操作类型"}});
    $('select[name="drection_type"]').ajaxcombobox({first: {id: "", text: "选择出入库类型"}});
    $('select[name="drection_type"]').change(function () {
        $('select[name="operate_type"]').ajaxcombobox({url: $('select[name="operate_type"]').data('url').replace('varkey', $(this).val()), first: {id: "", text: "选择操作类型"}});
    })
    $('input[name="number"]').change(function () {
        calc();
    })
    function calc() {
        var directionType = $('select[name="drection_type"]').val();
        if (!directionType) {
            console.log('未选择出入库类型!');
            return;
        }
        var operateType = $('select[name="operate_type"]').val();
        if (!operateType) {
            console.log('未选择操作类型!');
            return;
        }
        var params = {
            number: $('input[name="number"]').val(),
            price: $('input[name="price"]').val(),
            old_stock: $('#old_stock').val(),
            new_stock: 0,
            subtotal: 0
        }
        if (isNaN(params.number) || isNaN(params.price)) {
            console.log('数量或价格无效!');
            return;
        }
        if (directionType == 'IN') {
            params.new_stock = parseFloat(params.old_stock) + parseFloat(params.number);
        } else if (directionType == 'OUT') {
            params.new_stock = parseFloat(params.old_stock) - parseFloat(params.number);
        }
        params.subtotal = (params.number * params.price).toFixed(2);
        $('#new_stock').val(params.new_stock);
        $('#subtotal').val(params.subtotal);
        console.log(params);
    }
    setInterval(calc, 2000);
</script>
{/block}